<template>
  <div class="parent p-20 page-wrapper d-flex flex-column">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        sortable
        width="180"
        type="index"
        :label="$t('common.order_number')"
      ></el-table-column>
      <el-table-column
        prop="lib_name"
        :label="$t('renxiangkuguanli.lib_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="picture_no"
        :label="$t('renxiangkuguanli.picture_no')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="create_time"
        :label="$t('common.create_time')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="lib_type_text"
        :label="$t('renxiangkuguanli.lib_type')"
        min-width="180"
      ></el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="180">
        <template slot-scope="scope">
          <MyButton
            class="text"
            type="text"
            size="small"
            @click="handleManagement(scope.row)"
            >{{ $t("common.management") }}</MyButton
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import MyButton from "@/components/Button";
import { getLibList } from "../renxiangkuguanli/service";
export default {
  components: {
    MyButton,
  },
  data() {
    return {
      tableData: [],
      row: {},
      lib_type_list: [
        { label: this.$t("common.all"), value: void 0 },
        { label: this.$t("renxiangkuguanli.blackLib"), value: 1 },
        { label: this.$t("renxiangkuguanli.whiteLib"), value: 2 },
        { label: this.$t("route.moshengrenku"), value: 0 },
      ],
      isAddDialogShow: false,
      lib_type: void 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleManagement(row) {
      // 陌生人口
      if (row.lib_type === 0) {
        this.$router.push({
          name: "greyList",
        });
        localStorage.setItem("curR", "libraryRecord");
      } else {
        this.$router.push({
          name: "recordTargets",
          query: { lib_name: row.lib_name, lib_id: row.lib_id },
        });
      }
    },
    async getList() {
      const res = await getLibList({ lib_type: this.lib_type });
      this.tableData = res.data.record.map((item) => {
        return {
          ...item,
          create_time: item.create_time || "--",
          lib_type_text: this.lib_type_list.find(
            (i) => i.value === item.lib_type
          ).label,
          lib_name:
            item.lib_name === "stranger_lib"
              ? this.$t("route.moshengrenku")
              : item.lib_name,
        };
      });
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
}
</style>
